import * as echarts from '../../../ec-canvas/echarts.js';

let chart = null;

function initChart(chart, data) {
  // chart = echarts.init(canvas, null, {
  //   width: width,
  //   height: height,
  //   devicePixelRatio: dpr // new
  // });
  // canvas.setChart(chart);

  var option = {
    series: [{
      name: '访问来源',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '100%'],
      label: {
        normal: {
          position: 'inner'
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: data
    },]
  };
  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    elementStyle: '--random-angle: 0;',
    //旋转圈数
    degNum: 1,
    //旋转时间
    degTime: 3,
    ec: {
      lazyLoad: true
    },
    conLists: [{
      value: 1,
      name: '苹果'
    },
    {
      value: 1,
      name: '橘子'
    },
    {
      value: 1,
      name: '香蕉'
    }
    ],
    visiableflag: false,
  },

  changeConTitle(e) {
    var idx = e.currentTarget.dataset.index; //当前下标
    var val = e.detail.value; //当前输入的值
    var _list = this.data.conLists; //data中存放的数据
    for (let i = 0; i < _list.length; i++) {
      if (idx == i) {
        _list[i].value = 1 //将当前输入的值放到数组中对应的位置
        _list[i].name = val //将当前输入的值放到数组中对应的位置
      }
    }
    this.setData({
      conLists: _list
    })
  },
  set() {
    this.setData({
      visiableflag: true
    })
  },
  confirm() {
    if(!this.data.degNum||!this.data.degTime){
      wx.showToast({
        title: '请先设置转盘参数',
        icon: 'none',
        duration: 2000
      })
      return
    }
    this.setData({
      visiableflag: false
    })
  },
  add(e) {
    // 点击添加按钮，就往数组里添加一条空数据
    var _list = this.data.conLists;
    _list.push({
      value: 1,
      name: ''
    })
    this.setData({
      conLists: _list
    })
  },
  /**
   * 删除内容
   */
  del(e) {
    var idx = e.currentTarget.dataset.index;
    var _list = this.data.conLists;
    console.log(idx)
    for (let i = 0; i < _list.length; i++) {
      if (idx == i) {
        _list.splice(idx, 1)
      }
    }
    this.setData({
      conLists: _list
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.oneComponent = this.selectComponent('#mychart-dom-bar');
    this.getOption()
  },
  changedegNum(e) {
    var val = e.detail.value; //当前输入的值
    //如果不是数字就返回
    if (isNaN(val)||val<1) {
      wx.showToast({
        title: '请输入数字',
        icon: 'none',
        duration: 2000
      })
      return
    }

    this.setData({
      degNum: val
    })
  },
  changetime(e) {
    var val = e.detail.value; //当前输入的值
    if (isNaN(val)||val<1) {
      wx.showToast({
        title: '请输入数字',
        icon: 'none',
        duration: 2000
      })
      return
    }
    this.setData({
      degTime: val
    })
  },

  startz() {    
    this.getOption()
    this.setData({
      elementStyle:
        '--random-angle: 0;'
    });
    const query = wx.createSelectorQuery();
    query.select('.pan').boundingClientRect(rect => {
      const randomAngle = Math.floor(Math.random() * 360);
      // console.log(randomAngle, rect);
      // rect.style.setProperty('--random-angle', randomAngle + 'deg');
      this.setData({
        elementStyle: `--random-angle:${this.data.degNum * 360 + randomAngle}deg; animation: rotateElement ${this.data.degTime}s ease-out forwards;`
      });
    }).exec();
  },
  stopRotation() {


  },
  getOption() {
    this.init_chart(this.data.conLists)
  },
  init_chart(data) { //初始化第一个图表
    this.oneComponent.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart)
      initChart(chart, data)
      this.chart = chart;
      return chart;
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义抽奖转盘'
        })
      }, 2000)
    })
    return {
      title: '自定义抽奖转盘',
      path: '/pages/game/zhuanpan/index',
      promise 
    }
  },
  onShareTimeline(){
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义抽奖转盘'
        })
      }, 2000)
    })
    return {
      title: '自定义抽奖转盘',
      path: '/pages/game/zhuanpan/index',
      promise 
    }
  }
})